<template>
  <div>
    <div class="header">
      <img src="../assets/images/fanhui.png" height="23" alt="" @click="back"/>
      <div>消息中心</div>
      <div>
          排序<img src="../assets/images/排序.png" height="23" alt="" />
      </div>
    </div>

    <div>
      <van-tabs v-model="active" @click="onClick">
        <van-tab title="全部消息"> </van-tab>
        <van-tab title="系统消息"> </van-tab>
        <van-tab title="个人消息"> </van-tab>
        
      </van-tabs>
    </div>

    <div class="box">
      <div v-if="bool" style="padding: 100px 100px;" >
        <img src="../assets/images/暂无消息.png" alt="" />
        <p style="text-align: center">暂无消息</p>
      </div>
      <div v-else class="box-messageList">
        <MessageList :MessageList="item" v-for="(item,index) in records" :key="index" />
      </div>
    </div>
  </div>
</template>

<script>
import {message} from '../request/api'
import MessageList from '../components/component/messageList'
export default {
    components:{
        MessageList
    },
  data() {
    return {
        active:0,
        bool:false,
        records:[]
    };
  },
  methods:{
      back(){
          this.$router.back()
      },
      onClick(name){
          if(name==0){
              this.btn(name)
          }else if(name==1){
              this.btn(name)
          }else{
               this.btn(name)
          }
      },
      btn(name){
          message({
              current:1,
              size:10,
              type:name
          }).then(res=>{
              if(res.errCode==0){
                  console.log(res);
                  let {records} = res.data
                  this.records=records
              } 
          })
      }
  },
  created(name){
      this.btn(name)
      
  }
};
</script>
 
<style lang = "less" scoped>
.header {
  width: 100vw;
  height: 64px;
  background: #003399;
  display: flex;
  justify-content: space-around;
  color: #fff;
  font-size: 22px;
  padding: 25px 10px;
  box-sizing: border-box;
}
/deep/.van-tabs__line {
  background-color: #f2cb45;
  width: 60px;
}
</style>